<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>
</head>

<body id="cas">
<main class="container mt-3 mb-3">
    <div layout:fragment="content" class="mdc-card p-4 m-auto w-lg-100">
        <script>
            document.addEventListener("DOMContentLoaded", (event) => document.forms[0].elements[0].focus());
        </script>

        <h2 th:utext="#{cas.screen.acct.title}" />
        <p class="intro" th:utext="#{cas.screen.acct.intro}" />

        <form method="post" id="fm1" novalidate class="needs-validation">
            <div class="banner banner-danger my-2" th:if="${flowRequestContext.messageContext.hasErrorMessages()}">
                <p th:each="message : ${flowRequestContext.messageContext.allMessages}"
                   th:utext="${message.text}">Message Text</p>
            </div>


            <section th:each="entry : ${registrationProperties}" class="cas-field form-group my-3">
                <label class="mdc-text-field mdc-text-field--outlined control-label"
                        th:if="${entry.type != 'select'}">
                    <span class="mdc-notched-outline">
                        <span class="mdc-notched-outline__leading"></span>
                        <span class="mdc-notched-outline__notch">
                            <span class="mdc-floating-label" th:utext="#{${entry.label}}">Label</span>
                        </span>
                        <span class="mdc-notched-outline__trailing"></span>
                    </span>
                    <input class="mdc-text-field__input form-control"
                            th:id="${entry.name}"
                            th:name="${entry.name}"
                            size="25"
                            th:classappend="${entry.cssClass}"
                            th:type="${entry.type}"
                            th:attr="required=${entry.required ? 'true' : 'false'},pattern=${entry.pattern}"
                            autocapitalize="none"
                            th:title="#{${entry.title}}"
                            spellcheck="false"
                            th:autocomplete="${entry.name}"/>
                    <div class="mdc-text-field-helper-line invalid-feedback" th:if="${entry.validationMessage != null}">
                        <div th:id="${'helpertext-' + entry.name}"
                            class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" aria-hidden="true">
                            <span th:if="${entry.validationMessage != null}" th:utext="#{${entry.validationMessage}}"></span>
                        </div>
                    </div>
                </label>

                <select class="form-control"
                        th:if="${entry.type == 'select'}"
                        th:id="${entry.name}"
                        th:title="#{${entry.title}}"
                        th:name="${entry.name}"
                        th:classappend="${'custom-select ' + entry.cssClass}">
                        <option th:each="option,status : ${entry.values}" th:value="${status.index}" th:text="${option}" />
                </select>



            </section>

            <span th:if="${accountRegistrationCaptchaEnabled}">
                <div th:replace="~{fragments/recaptcha :: recaptchaToken}" />
            </span>

            <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
            <input type="hidden" name="_eventId" value="submit"/>
            <div class="form-actions d-flex justify-content-center">
                <div th:replace="~{fragments/submitbutton :: submitButton (messageKey='cas.screen.acct.button.submit', id='submit', name='submit')}"/>
                &nbsp;
                <button class="mdc-button mdc-button--outlined btn btn-secondary"
                        name="cancel"
                        th:value="#{cas.screen.acct.button.cancel}"
                        accesskey="c"
                        id="cancel"
                        type="button"
                        onclick="location.href = location.href;">
                    <span class="mdc-button__label" th:text="#{cas.screen.acct.button.cancel}">CANCEL</span>
                </button>
            </div>
        </form>
    </div>


</main>
</body>
</html>
